<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
</head>
<body>
<!-- loader Start -->
<div id="loading">
   <div id="loading-center">
   </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div th:include="admin/public::wrapper"></div>
<!-- Wrapper END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script th:src="@{/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script th:src="@{/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script th:src="@{/js/waypoints.min.js}"></script>
<script th:src="@{/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script th:src="@{/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script th:src="@{/js/apexcharts.js}"></script>
<!-- Slick JavaScript -->
<script th:src="@{/js/slick.min.js}"></script>
<!-- Select2 JavaScript -->
<script th:src="@{/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script th:src="@{/js/smooth-scrollbar.js}"></script>
<!-- lottie JavaScript -->
<script th:src="@{/js/lottie.js}"></script>
<!-- am core JavaScript -->
<script th:src="@{/js/core.js}"></script>
<!-- am charts JavaScript -->
<script th:src="@{/js/charts.js}"></script>
<!-- am animated JavaScript -->
<script th:src="@{/js/animated.js}"></script>
<!-- am kelly JavaScript -->
<script th:src="@{/js/kelly.js}"></script>
<!-- Flatpicker Js -->
<script th:src="@{https://cdn.jsdelivr.net/npm/flatpickr}"></script>
<!-- Chart Custom JavaScript -->
<script th:src="@{/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script th:src="@{/js/custom.js}"></script>
<script>
   jQuery("#home-servey-chart").length && am4core.ready(function() {
      var options = {
         series: [{
            name: 'Cash Flow',
            data: [1.45, 35.42, 5.9, -0.42, -12.6, -58.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
               5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
                       48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
            ]
         }],
         chart: {
            type: 'bar',
            height: 350
         },
         plotOptions: {
            bar: {
               colors: {
                  ranges: [{
                     from: -100,
                     to: -46,
                     color: '#e64141'
                  }, {
                     from: -45,
                     to: 0,
                     color: '#089bab'
                  }, {
                     from: 0,
                     to: 20,
                     color: '#FC9F5B'
                  }]
               },
               columnWidth: '80%',
            }
         },
         dataLabels: {
            enabled: false,
         },
         yaxis: {
            title: {
               text: 'Growth',
            },
            labels: {
               formatter: function (y) {
                  return y.toFixed(0) + "%";
               }
            }
         },
         xaxis: {
            type: 'datetime',
            categories: [
               '2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
               '2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
               '2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
               '2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
               '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
               '2013-07-01', '2013-08-01', '2013-09-01'
            ],
            labels: {
               rotate: -90
            }
         }
      };

      var chart = new ApexCharts(document.querySelector("#home-servey-chart"), options);
      chart.render();
   });
</script>
</body>
</html>